<template>
  <div class="app-container">
    <guidance class="stepBtn" title="帮助引导" :list="helpList" />

    <div class="node">
      <div class="left">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="serviceAdd('node1', 'add')"
        >新建服务</el-button>
        <el-table ref="multipleTable" :data="processNode1" tooltip-effect="dark" border class="node_table">
          <el-table-column prop="serviceName" label="服务名称" width="auto" />
          <!-- <el-table-column prop="serviceType" label="服务模板" width="auto" />
          <el-table-column prop="startCommand" label="启动命令" width="auto" />
          <el-table-column prop="stopCommand" label="停止命令" width="auto" /> -->
          <el-table-column
            label="操作"
            align="center"
            width="auto"
          >
            <template slot-scope="scope">
              <el-button
                v-hasPermi="['console:group:edit']"
                class="peizhi"
                size="mini"
                type="text"
                @click="serviceAdd('node1', 'edit',scope.row
                                   ,scope.$index)"
              >修改</el-button>
              <el-button
                class="xitong"
                size="mini"
                type="text"
                @click="closeNode(processNode1, scope.$index)"
              >删除</el-button>
              <el-button
                class="xitong"
                size="mini"
                type="text"
                @click="copyNode(processNode2,scope.row)"
              >
                复制</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="right">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="serviceAdd('node2', 'add')"
        >新建服务</el-button>
        <el-table ref="multipleTable" :data="processNode2" tooltip-effect="dark" border class="node_table">
          <el-table-column prop="serviceName" label="服务名称" width="auto" />
          <!-- <el-table-column prop="serviceType" label="服务模板" width="auto" />
          <el-table-column prop="startCommand" label="启动命令" width="auto" />
          <el-table-column prop="stopCommand" label="停止命令" width="auto" /> -->
          <el-table-column
            label="操作"
            align="center"
            width="auto"
          >
            <template slot-scope="scope">
              <el-button
                v-hasPermi="['console:group:edit']"
                class="peizhi"
                size="mini"
                type="text"
                @click="serviceAdd('node2', 'edit',scope.row
                                   ,scope.$index)"
              >修改</el-button>
              <!-- <el-button size="mini" type="text" icon="el-icon-document-checked" @click="fileMonitor(scope.row)" >文件监听</el-button> -->
              <el-button
                class="xitong"
                size="mini"
                type="text"
                @click="closeNode(processNode2, scope.$index)"
              >删除</el-button>
              <el-button
                class="xitong"
                size="mini"
                type="text"
                @click="copyNode(processNode1,scope.row)"
              >
                复制</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-col :span="24">
      <el-divider />
    </el-col>
    <div class="textCenter marginTop20">
      <el-button size="small" type="primary" plain @click="backPage">上一步</el-button>
      <el-button size="small" type="primary" @click="next">下一步</el-button>
    </div>

    <!-- 添加或修改节点信息对话框 -->
    <el-dialog
      class="noPadTb serviceBox"
      :title="title"
      :visible.sync="open"
      width="800px"
      :close-on-click-modal="false"
      append-to-body
    >
      <div>
        <el-form
          ref="elForm"
          :model="serviceConfig"
          :rules="rules"
          size="medium"
          label-width="125px"
          @submit.native.prevent
        >
          <el-col :span="12">
            <el-form-item label="服务名称" prop="serviceName">
              <el-input
                v-model="serviceConfig.serviceName"
                placeholder="请输入服务名称"
                show-word-limit
                maxlength="50"
                clearable
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务模板" prop="serviceType">
              <el-select
                v-model="serviceType"
                placeholder="请选择服务模板"
                filterable
                clearable
                :style="{ width: '100%' }"
                @change="changeServiceType"
              >
                <el-option
                  v-for="(item, index) in biz_tem_type_options"
                  :key="index"
                  :label="item.bizName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="启动命令" prop="startCommand">
              <el-tooltip class="item" effect="dark" content="如配置保障服务启停命令" placement="top">
                <i class="helpBtn mlBtn el-icon-question" @click="helpFn('如配置保障服务启停命令')" />
              </el-tooltip>
              <el-input
                v-model="serviceConfig.startCommand"
                type="textarea"
                placeholder="请输入启动命令"
                clearable
                :rows="3"
                maxlength="255"
                show-word-limit
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="停止命令" prop="stopCommand">
              <el-input
                v-model="serviceConfig.stopCommand"
                type="textarea"
                placeholder="请输入停止命令"
                clearable
                :rows="3"
                maxlength="255"
                show-word-limit
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="超时时长" prop="checkDelay">
              <el-input-number
                v-model="serviceConfig.checkDelay"
                :min="5"
                :max="300"
                controls-position="right"
                placeholder="请输入超时时长"
                clearable
                :style="{ width: '60%' }"
              />
              (秒)
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最少等待时长" prop="minWaitTime">
              <el-input-number
                v-model="serviceConfig.minWaitTime"
                :min="0"
                :max="300"
                controls-position="right"
                placeholder="请输入最少等待时长"
                clearable
                :style="{ width: '60%' }"
              />
              (秒)
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item id="service_check_type" label="验证方式" prop="service_check_type">
              <el-tooltip class="item" effect="dark" content="如何配置服务验证" placement="top">
                <i class="helpBtn mlBtn el-icon-question" @click="helpFn('配置服务验证')" />
              </el-tooltip>

              <el-tabs v-model="tableCheckType" type="border-card">
                <el-tab-pane
                  v-for="(item, index) in service_check_type_options"
                  :key="index"
                  :label="item.dictLabel"
                  :name="item.dictValue"
                >
                  <el-col :span="24">
                    <el-form-item v-show="item.dictValue == 'PS'" label="进程检查" class="marginLeft15">
                      <el-switch v-model="showPsBox" />

                    </el-form-item>

                    <el-form-item v-show="item.dictValue == 'SERVICE'" label="服务检查" class="marginLeft15">
                      <el-switch v-model="showServiceBox" />
                    </el-form-item>

                    <el-form-item v-show="item.dictValue == 'TELNET'" label="端口检查">
                      <el-switch v-model="showPingBox" />
                    </el-form-item>

                    <el-form-item v-show="item.dictValue == 'HTTPTEST'" label="HTTP检查">
                      <el-switch v-model="showHttpBox" />
                    </el-form-item>

                    <el-form-item v-show="item.dictValue == 'DBTEST'" label="数据库">
                      <el-switch v-model="showDbBox" />
                    </el-form-item>

                    <el-form-item v-show="item.dictValue == 'SCRIPT'" label="自定义脚本">
                      <el-switch v-model="showCuBox" />
                    </el-form-item>
                  </el-col>

                  <el-col v-show="showPsBox && item.dictValue == 'PS'" :span="24">
                    <el-form-item>
                      <el-row class="borderRow">
                        <el-col :span="24" class="">
                          <el-form-item label="进程检查" prop="processName">
                            <el-input
                              v-model.trim="serviceConfig.processName"
                              placeholder="请输入进程检查判断条件"
                              show-word-limit
                              clearable
                              type="textarea"
                              maxlength="255"
                              :style="{ width: '100%' }"
                            />

                            <span style="color: #909399;">
                              提示：多个进程检查用分号 ; 隔开 例如 进程A;进程B;进程C
                            </span>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>

                  <el-col v-show="showServiceBox && item.dictValue == 'SERVICE'" :span="24">
                    <el-form-item>
                      <el-row class="borderRow">
                        <el-col :span="24" class="">
                          <el-form-item label="服务检查" prop="processName">
                            <el-input
                              v-model.trim="serviceConfig.serviceTaskName"
                              placeholder="请输入服务检查判断条件"
                              show-word-limit
                              clearable
                              type="textarea"
                              maxlength="255"
                              :style="{ width: '100%' }"
                            />
                            <span style="color: #909399;">
                              提示：多个服务检查用分号 ; 隔开。例如 服务A;服务B;服务C
                            </span>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>

                  <el-col v-show="showPingBox && item.dictValue == 'TELNET'" :span="24">
                    <el-form-item>
                      <el-row class="borderRow">
                        <el-col :span="24" class="">
                          <el-form-item label="服务端口" prop="servicePort">
                            <el-input
                              v-model.trim="serviceConfig.servicePort"
                              placeholder="请输入服务端口"
                              show-word-limit
                              clearable
                              maxlength="15"
                              :style="{ width: '100%' }"
                            />
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>

                  <el-col v-show="showHttpBox && item.dictValue == 'HTTPTEST'" :span="24">
                    <el-form-item>
                      <div class="borderRow">
                        <el-row class="padBot10">
                          <el-col :span="24">
                            <el-form-item label="http接口" prop="checkPath">
                              <el-input
                                v-model.trim="serviceConfig.checkPath"
                                placeholder="请输入http接口"
                                show-word-limit
                                maxlength="250"
                                clearable
                                :style="{ width: '66%' }"
                              />
                              <el-button
                                class="linkTestBtn"
                                type="primary"
                                icon="el-icon-refresh"
                                size="mini"
                                @click="serviceHttpTestFn(item)"
                              >连接测试</el-button>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row class="padBot10">
                          <el-col :span="24">
                            <el-form-item class="验证方式" label="请求方式" prop="httpMethod">
                              <el-radio-group v-model="serviceConfig.httpMethod" size="medium">
                                <el-radio
                                  v-for="(
                                    item, index
                                  ) in service_http_method_options"
                                  :key="index"
                                  :label="item.dictValue"
                                  :value="item.dictValue"
                                >{{ item.dictLabel }}</el-radio>
                              </el-radio-group>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row v-show="serviceConfig.httpMethod == 'POST'" class="padBot10">
                          <el-col :span="24">
                            <el-form-item class="传参方式" label="传参方式" prop="httpParamsType">
                              <el-radio-group v-model="serviceConfig.httpParamsType" size="medium">
                                <el-radio
                                  v-for="(
                                    item, index
                                  ) in service_params_type_options"
                                  :key="index"
                                  :label="item.dictValue"
                                  :value="item.dictValue"
                                >{{ item.dictLabel }}</el-radio>
                              </el-radio-group>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row v-show="serviceConfig.httpMethod">
                          <span v-for="(items, index) in praForm" :key="index" class="inlineBlock">
                            <el-col :span="10">
                              <el-form-item label="参数名">
                                <el-input
                                  v-model.trim="items.key"
                                  placeholder="请输入参数名"
                                  clearable
                                  show-word-limit
                                  maxlength="50"
                                  :style="{ width: '100%' }"
                                />
                              </el-form-item>
                            </el-col>
                            <el-col :span="10">
                              <el-form-item label="参数值">
                                <el-input
                                  v-model.trim="items.value"
                                  placeholder="请输入参数值"
                                  clearable
                                  show-word-limit
                                  maxlength="50"
                                  :style="{ width: '100%' }"
                                />
                              </el-form-item>
                            </el-col>
                            <el-col v-show="index != praForm.length - 1" :span="4">
                              <i class="el-icon-remove-outline removeBtn" @click="removePraForm(index)" />
                            </el-col>
                            <el-col v-show="index == praForm.length - 1" :span="4">
                              <el-button
                                class="marginLeft15 el-icon-plus"
                                type="primary"
                                size="mini"
                                @click="addPraForm"
                              >添加</el-button>
                            </el-col>
                          </span>
                        </el-row>
                        <!-- 	<el-row>
												  <el-col :span="24">
												  <el-form-item label="备注" prop="field106">
													  <el-input v-model="serviceConfig.field106" type="textarea" placeholder="请输入备注"
													  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
												  </el-form-item>
												  </el-col>
											  </el-row> -->
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col v-show="showDbBox && item.dictValue == 'DBTEST'" :span="24">
                    <el-form-item>
                      <el-row class="borderRow">
                        <el-col :span="24" class="mt10">
                          <el-form-item label="数据库类型" prop="dataUserName">
                            <el-select
                              v-model="dataBaseType"
                              value-key="id"
                              placeholder="请选择数据库类型"
                              filterable
                              clearable
                              :style="{ width: '50%' }"
                              @change="changeDataBase(serviceConfig)"
                            >
                              <el-option
                                v-for="(item, index) in dataBase_options"
                                :key="index"
                                :label="item.databaseName"
                                :value="item"
                              />
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="24" class="mt10">
                          <el-form-item label="驱动路径" prop="dataUserName">
                            <el-input
                              v-model.trim="serviceConfig.driverPath"
                              class="padl80"
                              placeholder="请输入驱动路径"
                              show-word-limit
                              clearable
                              maxlength="255"
                              :style="{ width: '66%' }"
                            >
                              <el-button slot="append" icon="el-icon-folder-add" @click="getPath('qdlj')">选择</el-button>
                            </el-input>

                            <el-button
                              class="linkTestBtn"
                              type="primary"
                              icon="el-icon-refresh"
                              size="mini"
                              @click="serviceDbTestFn()"
                            >连接测试</el-button>
                          </el-form-item>
                        </el-col>
                        <el-col :span="24" class="mt10">
                          <el-form-item label="数据库驱动" prop="dataDriver">
                            <el-input
                              v-model.trim="serviceConfig.dataDriver"
                              placeholder="请输入数据库驱动"
                              show-word-limit
                              clearable
                              maxlength="255"
                              :style="{ width: '100%' }"
                            />

                          </el-form-item>
                        </el-col>
                        <el-col :span="12" class="marginTop20">
                          <el-form-item label="账号" prop="dataUserName">
                            <el-input
                              v-model.trim="serviceConfig.dataUserName"
                              placeholder="请输入数据库账号"
                              show-word-limit
                              clearable
                              maxlength="50"
                              :style="{ width: '100%' }"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12" class="marginTop20">
                          <el-form-item label="密码" prop="dataPwd">
                            <el-input
                              v-model.trim="serviceConfig.dataPwd"
                              type="password"
                              show-password
                              placeholder="请输入数据库密码"
                              show-word-limit
                              clearable
                              maxlength="50"
                              :style="{ width: '100%' }"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="24" class="marginTop20">
                          <el-form-item label="jdbc地址" prop="dataUrl">
                            <el-input
                              v-model="serviceConfig.dataUrl"
                              type="textarea"
                              placeholder="请输入jdbc地址"
                              show-word-limit
                              clearable
                              :style="{ width: '100%' }"
                            />
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>

                  <el-col v-show="showCuBox && item.dictValue == 'SCRIPT'" :span="24">
                    <el-form-item label="自定义脚本">
                      <el-row>
                        <!-- <el-input type="textarea" v-model="serviceConfig.checkScriptPath" placeholder="请输入自定义脚本" clearable :rows="3"
												   maxlength="255" show-word-limit :style="{ width: '100%' }"> -->
                        <el-input
                          v-model="serviceConfig.checkScriptPath"
                          placeholder="请选择自定义脚本"
                          class="inputBox inputBox2"
                        >
                          <el-button
                            slot="append"
                            icon="el-icon-folder-add"
                            @click.stop="getPath('zdyjb')"
                          >选择</el-button>
                        </el-input>
                        </el-input>
                      </el-row>
                    </el-form-item>
                  </el-col>
                </el-tab-pane>
              </el-tabs>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <div slot="footer" class="node_footer">
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="目录选择" :visible.sync="dialogVisible" width="500px">
      <div class="transfer">
        <div class="left transferk">
          <el-scrollbar style="height: 100%;" wrap-class="list" wrap-style="overflow-x:hidden;">
            <el-tree
              ref="nodeTree"
              :props="props"
              :data="pathData"
              lazy
              :default-expanded-keys="defaultList"
              :default-checked-keys="defaultList"
              show-checkbox
              node-key="pathAll"
              :check-strictly="true"
              @check-change="handleClickTree"
            >
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <span>
                  <i :class="data.icon" /> <span
                    class="marginLeft10"
                    :class="data.hiddenFile && data.type != 1 ? 'hiddenFile' : ''"
                  >{{ data.path }}</span>
                </span>
              </span>
            </el-tree>
          </el-scrollbar>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <!-- <el-button class="refreshBtn" @click="getDiskPath">刷新<i class="el-icon-refresh" /></el-button> -->
        <el-button type="primary" @click="addNode()">添加<i class="el-icon-arrow-right el-icon--right" /></el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { listHessBizTem } from '@/api/console/hessBizTem'

import global_ from '@/utils/Global'
import { diskPath, serviceDbTest } from '@/api/console/reprint'

import { httpCheck } from '@/api/console/group'

import { hessList } from '@/api/system/SysJdbcDrive'

export default {
  props: {
    active: Number,
    formDatas: Object
  },
  data() {
    return {
      helpList: [
        {
          title: '1.业务配置页面指引',
          helpMsg: '业务配置页面指引'
        },
        {
          title: '2.服务配置页面指引',
          helpMsg: '服务配置页面指引'
        }
      ],
      helpList2: [
        {
          title: '1.服务配置页面指引',
          helpMsg: '服务配置页面指引'
        },
        {
          title: '2.如何配置验证方式',
          helpMsg: '配置服务验证'
        },
        {
          title: '3.如何配置保障服务启停命令',
          helpMsg: '如何配置保障服务启停命令'
        }
      ],
      isDraggable: false,
      // 模板节点结构数据
      processNode1: [],
      processNode2: [],
      processNode3: [],
      activeName: 'first',
      open: false,
      title: '',
      form: '',
      // 判断提交配置的层级
      level: '',
      defaultList: [],
      // 单条配置数据
      serviceConfig: {
        serviceName: '', // 服务名称
        serviceType: null, //
        settingType: null, // 配置类型 0，模板配置 1. 业务配置
        startCommand: null, // 启动命令
        stopCommand: null, // 停止命令
        servicePort: null, // 服务端口
        checkType: [], // 验证方式
        checkPath: null, // 验证接口
        httpMethod: null, // 请求方式
        httpParamsBody: {}, // 参数值
        httpParamsType: '', // 当请求方式为post 的时候的传参方式
        dataUserName: null, // 数据库账号
        driverPath: '', // 驱动路径
        dataDriver: '', // 驱动
        dataPwd: null, // 数据库密码
        dataUrl: null, // 数据库地址
        checkStatus: null, // 验证结果
        serviceLevelFirst: null, // 行维度
        serviceLevelSecond: null, // 列维度
        checkDelay: 20, // 超时时长默认20秒
        minWaitTime: 0,
        processName: '', // 进程检查
        checkScriptPath: '', // 自定义脚本
        serviceTaskName: '' // 服务检查
      },
      serviceType: '',
      rules: {
        serviceName: [
          {
            required: true,
            message: '请输入服务名称',
            trigger: 'blur'
          }
        ],
        settingType: [
          {
            required: true,
            message: '请选择服务模板',
            trigger: 'change'
          }
        ],
        startCommand: [
          {
            required: true,
            message: '请输入启动命令',
            trigger: 'blur'
          }
        ],
        cuCommand: [
          {
            required: true,
            message: '请输入脚本内容',
            trigger: 'blur'
          }
        ],
        stopCommand: [
          {
            required: true,
            message: '请输入停止命令',
            trigger: 'blur'
          }
        ],
        checkDelay: [
          {
            required: true,
            message: '请选择超时时长',
            trigger: 'blur'
          }
        ],
        minWaitTime: [
          {
            required: true,
            message: '请选择最少等待时长',
            trigger: 'blur'
          }
        ],
        servicePort: [
          {
            required: false,
            message: '请输入服务端口',
            trigger: 'blur'
          }
        ]
      },
      // 业务配置-验证方式
      service_check_type_options: [],
      // 业务配置-请求方式
      service_http_method_options: [],
      // 业务配置-参数类型
      service_params_type_options: [],
      // 业务模板类型
      biz_tem_type_options: [],
      // 业务配置-验证结果
      service_check_status_options: [],
      // 添加参数
      praForm: [],
      // type add 添加  edit 修改
      type: 'add',
      // 需要修改node 配置节点的索引值
      editNodeIndex: '',
      securityServices: [],
      showHttpBox: false,
      showDbBox: false,
      showPsBox: false,
      showPingBox: false,
      showCuBox: false,
      showServiceBox: false,
      tableCheckType: 'PS',
      props: {
        label: 'path',
        children: 'children',
        isLeaf: 'leaf'
      },
      pathData: [],
      pathDataCp: [],
      dialogVisible: false,
      // 数据库类型
      dataBaseType: {},
      addType: '',
      // A机器的id 用来查模板数据
      hessNodeId: '',
      dataBase_options: []
    }
  },
  created() {
    // 获取字典数据
    this.getDictList()
    if (this.formDatas.id) {
      this.initData()
    }
  },
  methods: {
    changeDataBase(serviceConfig) {
      serviceConfig.driverPath = this.dataBaseType.jarPath
      serviceConfig.dataDriver = this.dataBaseType.jdbcDriverClass
      serviceConfig.dataUrl = this.dataBaseType.jdbcDriveUrl
    },
    // 添加 节点
    addNode() {
      var NodeArr = this.$refs.nodeTree.getCheckedNodes()

      var text = ''
      if (this.addType == 'qdlj') {
        text = '驱动路径'
      }

      if (this.addType == 'zdyjb') {
        text = '脚本路径'
      }

      if (NodeArr.length > 1) {
        this.$message({
          message: text + '只能选择一项',
          type: 'warning'
        })
        return false
      } else if (NodeArr.length == 0) {
        this.$message({
          message: '没有选择' + text,
          type: 'warning'
        })
        return false
      }

      if (this.addType == 'qdlj') {
        this.serviceConfig.driverPath = NodeArr[0].pathAll.replace(
          /\\\\/g,
          '\\'
        )
      }

      if (this.addType == 'zdyjb') {
        this.serviceConfig.checkScriptPath = NodeArr[0].pathAll.replace(
          /\\\\/g,
          '\\'
        )
      }

      this.dialogVisible = false
    },
    // 测试http 连接请求
    serviceHttpTestFn(row) {
      var vue = this

      var haPort = ''
      if (
        this.formDatas.hessNodes[0].nodeIp == this.formDatas.importantNodeIp
      ) {
        haPort = this.formDatas.hessNodes[0].haPort
      } else {
        haPort = this.formDatas.hessNodes[1].haPort
      }

      var formData = {}

      if (
        vue.serviceConfig.checkPath == '' ||
        vue.serviceConfig.checkPath == null
      ) {
        this.$message.error('请输入HTTP接口')
        return false
      } else {
        formData.checkPath = vue.serviceConfig.checkPath
      }

      if (
        vue.serviceConfig.httpMethod == '' ||
        vue.serviceConfig.httpMethod == null
      ) {
        this.$message.error('请选择接口请求方式 ')
        return false
      } else {
        formData.httpMethod = vue.serviceConfig.httpMethod
      }

      if (
        vue.serviceConfig.httpMethod == 'POST' &&
        vue.serviceConfig.httpParamsType == ''
      ) {
        this.$message.error('请选择接口传参方式 ')
        return false
      } else if (
        vue.serviceConfig.httpMethod == 'POST' &&
        vue.serviceConfig.httpParamsType != ''
      ) {
        formData.httpParamsType = vue.serviceConfig.httpParamsType
      }

      const httpParamsBody = {}

      for (let i = 0, len = this.praForm.length; i < len; i++) {
        const item = this.praForm[i]
        if (item.key == '' && item.value != '') {
          this.$message.error(
            '参数值为：' + item.value + '   的数据没有设置参数名'
          )
          return false
        } else if (item.key != '' && item.value == '') {
          this.$message.error(
            '参数名为：' + item.key + '   的数据没有设置参数值'
          )
          return false
        } else if (item.key != '' && item.value != '') {
          httpParamsBody[item.key] = item.value
        }
      }

      formData.httpParamsBody = JSON.stringify(httpParamsBody)
      formData.nodeIp = this.formDatas.importantNodeIp
      formData.haPort = haPort

      httpCheck(formData).then((response) => {
        if (!response.data) {
          this.$message({
            title: '失败',
            message: '请求失败',
            type: 'warning'
          })
        } else {
          this.$message({
            title: '成功',
            message: '请求成功',
            type: 'success'
          })
        }
      })
    },
    // 测试数据库驱动
    serviceDbTestFn() {
      var haPort = ''
      if (
        this.formDatas.hessNodes[0].nodeIp == this.formDatas.importantNodeIp
      ) {
        haPort = this.formDatas.hessNodes[0].haPort
      } else {
        haPort = this.formDatas.hessNodes[1].haPort
      }
      var data = {
        id: this.formDatas.importantNodeId,
        nodeIp: this.formDatas.importantNodeIp,
        haPort: haPort,
        params: this.serviceConfig
      }

      serviceDbTest(data).then((response) => {
        if (
          response.msg == '数据库检测失败' ||
          response.msg == '数据库测试失败！'
        ) {
          this.$message({
            title: '失败',
            message: response.msg,
            type: 'warning'
          })
        } else {
          this.$message({
            title: '成功',
            message: response.msg,
            type: 'success'
          })
        }
      })
    },

    getPath(type) {
      var node = {}
      // this.getDiskPath(node);
      this.addType = type
      this.dialogVisible = true
    },
    // 实现单选只需要给node增加点击事件，并控制setCheckedKeys即可
    handleClickTree(data, checked, node) {
      if (checked) {
        this.$refs.nodeTree.setCheckedNodes([data])
      }
    },
    // 刷新目录数据
    // getDiskPath() {
    //   this.getDiskPathFn({
    //     id: this.formDatas.importantNodeId,
    //     nodeIp: this.formDatas.importantNodeIp
    //   })
    // },
    // 获取node节点的 文件目录信息
    // getDiskPathFn(node, resolve) {
    //   var vue = this
    //   if (node.level === 0) {
    //     return resolve(this.pathData)
    //   }
    //   if (node.data && node.data.path) {
    //     this.nodeInfo.params = {
    //       diskPath: node.data.pathAll
    //     }
    //   } else {
    //     this.nodeInfo = node
    //     this.nodeInfo.params = {
    //       diskPath: ''
    //     }
    //   }
    // },
    initData() {
      this.formDatas.securityServices.map((item) => {
        if (typeof item.checkType === 'string') {
          item.checkType = item.checkType.split(',')
        } else if (typeof item.checkType === 'object') {
        } else {
          console.error(
            '未知的“item.checkType” 数据格式，应该为数组或者字符串格式'
          )
        }

        if (this.$props.formDatas.importantNodeId === item.nodeId) {
          this.processNode1.push(item)
        }

        if (this.$props.formDatas.securityNodeId === item.nodeId) {
          this.processNode2.push(item)
        }
      })
      console.log(this.processNode1, this.processNode2)

      this.arrSort(this.processNode1)
      this.arrSort(this.processNode2)
      this.arrSort(this.processNode3)
      // this.getDiskPathFn({
      //   id: this.formDatas.importantNodeId,
      //   nodeIp: this.formDatas.importantNodeIp
      // })
    },
    resetForm(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => { })
    },
    arrSort(newarr) {
      /**  冒泡法排序
       * 插入发排序，即那数组的前一项和后一项对比，如果前面一项小于后面
       * 一项，则将两者位置互换，从数组第1个元素开始对比；如下示例
       */
      if (newarr.length < 2) {
        return newarr
      }

      for (let i = 0; i < newarr.length; i++) {
        for (let j = 0; j < newarr.length; j++) {
          if (newarr[j + 1]) {
            if (
              newarr[j].serviceLevelSecond > newarr[j + 1].serviceLevelSecond
            ) {
              const pre = newarr[j]
              newarr[j] = newarr[j + 1]
              newarr[j + 1] = pre
            }
          }
        }
      }
      return newarr
    },
    // 获取字典数据
    getDictList() {
      // 业务配置-验证方式
      this.getDicts('service_check_type').then((response) => {
        this.service_check_type_options = response.data
        // console.log(this.service_check_type_options)
      })

      // 业务配置-请求方式
      this.getDicts('service_http_method').then((response) => {
        this.service_http_method_options = response.data
      })

      // 业务配置-参数类型
      this.getDicts('service_params_type').then((response) => {
        this.service_params_type_options = response.data
      })

      // 业务配置-验证结果
      this.getDicts('service_params_type').then((response) => {
        this.service_check_status_options = response.data
      })
    },
    listHessBizTemFn(hessNodeId) {
      // 业务模板类型
      listHessBizTem({
        pageNum: 1,
        pageSize: 1000,
        hessNodeId: hessNodeId
      }).then((response) => {
        this.biz_tem_type_options = response.rows
      })

    // 获取数据库模板
    // hessList({
    //   hessNodeId: hessNodeId,
    //   status: 1
    // }).then((response) => {
    //   // console.log('数据库模板',response)
    //   this.dataBase_options = response.rows
    // })
    },
    // 数据改变的时候 自动配置模板的数值
    changeServiceType(id) {
      // console.log(id)
      this.biz_tem_type_options.map((item) => {
        if (id == item.id) {
          this.serviceConfig.startCommand = '' + item.startCmd
          this.serviceConfig.stopCommand = '' + item.stopCmd
          this.serviceConfig.servicePort = '' + item.servicePort
          this.serviceConfig.serviceType = '' + item.id
        }
      })
    },
    // 添加参数
    addPraForm() {
      this.praForm.push({
        key: '',
        value: ''
      })
    },
    // 删除参数
    removePraForm(index) {
      this.praForm.splice(index, 1)
    },
    // 上一步
    backPage() {
      this.$emit('changeActive', 0)
    },
    // 处理页面数据
    processingData() {
      var vue = this
      // console.log(this.serviceConfig)
      // 				"serviceLevelFirst": null,//行维度
      // 				"serviceLevelSecond": null//列维度
      this.securityServices = []

      // 处理数据
      function mapDataList(list, leve, vue) {
        list.map((item, index) => {
          item.serviceLevelFirst = leve
          item.serviceLevelSecond = ++index
          item.checkType = item.checkType.toString()

          if (typeof item.httpParamsBody === 'object') {
            item.httpParamsBody = JSON.stringify(item.httpParamsBody)
          }

          vue.securityServices.push(item)
        })
      }

      mapDataList(this.processNode1, 1, vue)
      mapDataList(this.processNode2, 2, vue)
      mapDataList(this.processNode3, 3, vue)

      // console.log(this.securityServices)

      if (this.securityServices.length == 0) {
        this.$message.error('错误，请选至少一项服务')
        return false
      }

      return true
    },
    // 下一步
    next() {
      if (this.activeName == 'expertMode') {
        const returnInfo = this.handelConfirm('expertMode')
        if (returnInfo == false || returnInfo == undefined) {
          return
        }
        //         console.log(this.serviceConfig);
        //         console.log(this.securityServices)
      }

      if (this.processingData()) {
        var serviceNameList = []

        for (let i = 0, len = this.securityServices.length; i < len; i++) {
          if (
            serviceNameList.indexOf(
              this.securityServices[i].serviceName
            ) != -1
          ) {
            this.$confirm(
              '存在重名服务 【 ' +
              this.securityServices[i].serviceName +
              ' 】 , 请修改!',
              '警告',
              {
                confirmButtonText: '确定',
                type: 'warning'
              }
            ).then(() => { })
            return false
          } else {
            serviceNameList.push(this.securityServices[i].serviceName)
          }
        }

        this.$emit('changeActive', 2, this.securityServices)
        return true
      }
    },
    copyNode(node, data) {
      // console.log(this[node], node)
      console.log(data)

      node.push(data)
    },

    // 添加 业务配置数据 传参判断层级
    serviceAdd(level, type, item, index) {
      var vue = this
      this.open = true
      this.level = level
      this.praForm = []
      this.serviceType = ''
      this.showHttpBox = false
      this.showDbBox = false
      this.showPsBox = false
      this.showPingBox = false
      this.showCuBox = false
      this.showServiceBox = false

      this.tableCheckType = 'PS'
      if (type == 'add') {
        this.title = '添加服务'
        this.serviceConfig = {
          serviceName: '', // 服务名称
          serviceType: null, //
          settingType: null, // 配置类型 0，模板配置 1. 业务配置
          startCommand: null, // 启动命令
          stopCommand: null, // 停止命令
          servicePort: null, // 服务端口
          checkType: [], // 验证方式
          checkPath: null, // 验证接口
          httpMethod: null, // 请求方式
          httpParamsType: '', // 当请求方式为post 的时候的传参方式
          httpParamsBody: {}, // 参数值
          dataUserName: null, // 数据库账号
          driverPath: '', // 驱动路径
          dataDriver: '', // 驱动
          dataPwd: null, // 数据库密码
          dataUrl: null, // 数据库地址
          checkStatus: null, // 验证结果
          serviceLevelFirst: null, // 行维度
          serviceLevelSecond: null, // 列维度
          checkDelay: 20, // 超时时长默认20秒
          minWaitTime: 0,
          processName: '', // 进程检查
          checkScriptPath: '', // 自定义脚本
          serviceTaskName: '' // 服务检查
        }
        this.praForm.push({
          key: '',
          value: ''
        })
      }

      this.type = type
      if (type == 'edit') {
        this.editNodeIndex = index
        this.title = '编辑服务'
        this.serviceConfig = JSON.parse(JSON.stringify(item))
        this.dataBaseType.jdbcDriverClass = this.serviceConfig.dataDriver

        // 处理兼容
        if (this.serviceConfig.httpParamsType == null) {
          this.serviceConfig.httpParamsType = ''
        }
        this.serviceConfig.httpParamsType += ''

        vue.biz_tem_type_options.map((itemTy) => {
          if (vue.serviceConfig.serviceType == itemTy.id) {
            vue.serviceType = itemTy.id
          }
        })

        if (typeof this.serviceConfig.checkType === 'string') {
          this.serviceConfig.checkType =
            this.serviceConfig.checkType.split(',')
        }

        this.tableCheckType = this.serviceConfig.checkType[0]
        this.serviceConfig.checkType.map((itemCk) => {
          if (itemCk == 'TELNET') {
            this.showPingBox = true
          }
          if (itemCk == 'PS') {
            this.showPsBox = true
          }
          if (itemCk == 'HTTPTEST') {
            this.showHttpBox = true
          }
          if (itemCk == 'DBTEST') {
            this.showDbBox = true
          }

          if (itemCk == 'SERVICE') {
            this.showServiceBox = true
          }

          if (itemCk == 'SCRIPT') {
            this.showCuBox = true
          }
        })
        let parJsondata = {}
        if (typeof this.serviceConfig.httpParamsBody === 'string') {
          parJsondata = JSON.parse(this.serviceConfig.httpParamsBody)
        } else {
          parJsondata = this.serviceConfig.httpParamsBody
        }
        for (const key in parJsondata) {
          this.praForm.push({
            key: key,
            value: parJsondata[key]
          })
        }

        if (this.praForm.length == 0) {
          this.praForm.push({
            key: '',
            value: ''
          })
        }
      }
    },
    subordinateEdit() { },
    deleteFn() { },
    onClose() {
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.$emit('update:visible', false)
    },
    // 删除服务
    closeNode(processNode, index) {
      this.$confirm(
        `此操作将除 "${processNode[index].serviceName}", 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          processNode.splice(index, 1)
        })
        .catch(() => { })
    },
    // 添加修改服务
    handelConfirm(expertMode) {
      var vue = this
      this.$refs['elForm'].validate((valid) => {
        if (!valid) return

        const newArr = []
        if (this.showPingBox) {
          newArr.push('TELNET')
        }
        if (this.showServiceBox) {
          newArr.push('SERVICE')
        }
        if (this.showPsBox) {
          newArr.push('PS')
        }
        if (this.showHttpBox) {
          newArr.push('HTTPTEST')
        }
        if (this.showDbBox) {
          newArr.push('DBTEST')
        }
        if (this.showCuBox) {
          newArr.push('SCRIPT')
        }

        this.serviceConfig.checkType = newArr.toString()

        // 是否存在重复
        var isRepeat = false
        // 是否判断
        var isJump = true
        vue.processNode1.map((item1) => {
          if (item1.serviceName == vue.serviceConfig.serviceName) {
            isRepeat = true
            if (vue.serviceConfig.id) {
              if (item1.id == vue.serviceConfig.id) {
                isJump = false
              }
            } else {
              if (vue.type == 'edit') {
                isJump = false
              }
            }
          }
        })

        vue.processNode2.map((item2) => {
          if (item2.serviceName == vue.serviceConfig.serviceName) {
            isRepeat = true
            if (vue.serviceConfig.id) {
              if (item2.id == vue.serviceConfig.id) {
                isJump = false
              }
            } else {
              if (vue.type == 'edit') {
                isJump = false
              }
            }
          }
        })

        if (isRepeat && isJump) {
          this.$message.error('服务名称重复，请更换新名称')
          return false
        }

        // if (this.serviceConfig.checkType == '') {
        //   this.$message.error('最少选择一项验证方式')
        //   return false
        // }

        if (vue.showPsBox && vue.serviceConfig.processName == '') {
          this.$message.error('请输入进程检查')
          return false
        }

        if (vue.showServiceBox && vue.serviceConfig.serviceTaskName == '') {
          this.$message.error('请输入服务检查')
          return false
        }

        if (vue.showPingBox && vue.serviceConfig.servicePort == '') {
          this.$message.error('请输入服务端口')
          return false
        }

        if (vue.showHttpBox) {
          if (
            vue.serviceConfig.checkPath == '' ||
            vue.serviceConfig.checkPath == null
          ) {
            this.$message.error('请输入HTTP接口')
            return false
          }

          if (
            vue.serviceConfig.httpMethod == '' ||
            vue.serviceConfig.httpMethod == null
          ) {
            this.$message.error('请选择接口请求方式 ')
            return false
          }

          if (
            vue.serviceConfig.httpMethod == 'POST' &&
            vue.serviceConfig.httpParamsType == ''
          ) {
            this.$message.error('请选择接口传参方式 ')
            return false
          }
        }

        if (vue.showDbBox) {
          if (
            vue.serviceConfig.driverPath == '' ||
            vue.serviceConfig.driverPath == null
          ) {
            this.$message.error('请选择驱动路径')
            return false
          }

          if (
            vue.serviceConfig.dataDriver == '' ||
            vue.serviceConfig.dataDriver == null
          ) {
            this.$message.error('请输入数据库驱动')
            return false
          }

          if (
            vue.serviceConfig.dataUserName == '' ||
            vue.serviceConfig.dataUserName == null
          ) {
            this.$message.error('请输入数据库账号')
            return false
          }

          if (
            vue.serviceConfig.dataPwd == '' ||
            vue.serviceConfig.dataPwd == null
          ) {
            this.$message.error('请输入数据库密码 ')
            return false
          }

          if (
            vue.serviceConfig.dataUrl == '' ||
            vue.serviceConfig.dataUrl == null
          ) {
            this.$message.error('请输入jdbc地址 ')
            return false
          }
        }

        if (vue.showCuBox && !vue.serviceConfig.checkScriptPath) {
          vue.showCuBox = true
          this.$message.error('请输入自定义脚本内容，必填项')
          return false
        }

        const httpParamsBody = {}

        for (let i = 0, len = this.praForm.length; i < len; i++) {
          const item = this.praForm[i]
          if (item.key == '' && item.value != '') {
            this.$message.error(
              '参数值为：' + item.value + '   的数据没有设置参数名'
            )
            return false
          } else if (item.key != '' && item.value == '') {
            this.$message.error(
              '参数名为：' + item.key + '   的数据没有设置参数值'
            )
            return false
          } else if (item.key != '' && item.value != '') {
            httpParamsBody[item.key] = item.value
          }
        }

        this.serviceConfig.httpParamsBody = httpParamsBody
        // console.log(this.$props.formDatas)

        this.serviceConfig.nodeId = this.$props.formDatas[vue.level === 'node1' ? 'importantNodeId' : 'securityNodeId']

        const serviceConfig = JSON.parse(JSON.stringify(this.serviceConfig))

        // 是否是专家模式
        if (expertMode == 'expertMode') {
          return true
        }

        if (vue.type == 'add') {
          switch (vue.level) {
            case 'node1':
              vue.processNode1.push(serviceConfig)
              break
            case 'node2':
              vue.processNode2.push(serviceConfig)
              break
            case 'node3':
              vue.processNode3.push(serviceConfig)
              break
            case 'nodeNest':
              if (this.processNode2.length == 0) {
                this.processNode2.push(serviceConfig)
              } else if (
                this.processNode2.length != 0 &&
                this.processNode3.length == 0
              ) {
                this.processNode3.push(serviceConfig)
              }

              break
            default:
              break
          }
        }

        if (vue.type == 'edit') {
          console.log(vue.level, '12121')

          switch (vue.level) {
            case 'node1':
              vue.processNode1.splice(vue.editNodeIndex, 1, serviceConfig)
              break
            case 'node2':
              vue.processNode2.splice(vue.editNodeIndex, 1, serviceConfig)
              break
            case 'node3':
              vue.processNode3.splice(vue.editNodeIndex, 1, serviceConfig)
              break
            default:
              break
          }
        }

        vue.open = false
      })
    },
    // 计算返回class
    reClass(type, index, len) {
      if (type == 'middle' && this.processNode3.length == 0) {
        type = 'bot'
      }

      if (type != 'bot') {
        if (this.processNode2.length == 0) {
          if (index == 0 && index == len - 1) {
            return ''
          } else if (index != 0 && index == len - 1) {
            return ''
          } else {
            return 'topOneLeft'
          }
        }

        if (index == 0 && index != len - 1) {
          return 'topFrist'
        } else if (index == 0 && index == len - 1) {
          return 'topFristEnd'
        } else if (index != 0 && index == len - 1) {
          return 'topEnd'
        } else {
          return 'topMiddle'
        }
      } else {
        if (index == 0 && index != len - 1) {
          return 'lastFrist'
        } else if (index > 0 && index != len - 1) {
          return 'lastFrist'
        } else if (index == 0 && index == len - 1) {
          return 'lastFristEnd'
        } else if (index != 0 && index == len - 1) {
          return 'lastEnd'
        }
      }

      // 		 if (type == "top") {
      //
      //       } else if (type == "middle") {
      //         if (index == 0 && index == len - 1) {
      //           return "midFristEnd";
      //         } else if (index != 0 && index == len - 1) {
      //           return "";
      //         } else {
      //           return "topOneLeft";
      //         }
      //       } else if (type == "bot") {
      //         if (index == 0 && index != len - 1) {
      //           return "botFrist";
      //         } else if (index == 0 && index == len - 1) {
      //           return "botFristEnd";
      //         } else if (index != 0 && index == len - 1) {
      //           return "botEnd";
      //         } else {
      //           return "botMiddle"
      //         }
      //       }
    }
  }
}
</script>
<style>
.noPadTb .el-dialog__body {
  margin-top: 10px;
  padding: 5px 40px 5px 0px;
  padding-bottom: 0;
}

.noPadTb .el-dialog__footer {
  border: none;
}

#service_check_type .el-tabs--border-card {
  box-shadow: none;
}

#service_check_type .padl80 .el-input__inner {
  padding-right: 80px;
}

.noPadTb .el-form-item__label {
  padding: 0 25px 0 0;
}
</style>
<style lang="scss" scoped>
.center-scrollbar {
  width: 300px;
  overflow: hidden;
}

.app-container,
.noPadTb {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.marginTop20 {
  margin-top: 20px;
}

.marginBot10 {
  margin-bottom: 10px;
}

.textColorGray {
  color: #898989;
  position: absolute;
  left: 41%;
  bottom: 8%;
}

#processTopBox {
  overflow-x: auto;
}

.processBox {
  position: relative;
  white-space: nowrap;
  min-height: 120px;
  min-width: 300px;
}

.processBox>div {
  display: inline-block;
  min-height: 120px;
  min-width: 300px;
}

.processBox>div>span {
  display: inline-block;
  min-height: 120px;
  min-width: 300px;
}

.refreshBtn {
  float: left;
  margin-left: 10px;
}

.letAddBtn {
  position: absolute;
  top: 10px;
}

.borderRow {
  // border: 1px dashed #dfdfdf;
  padding: 15px 0;
  border-radius: 5px;
}

.marginLeft15 {
  margin-left: 15px;
  margin-bottom: 10px;
}

.mlBtn {
  position: absolute;
  left: -22px;
  top: 12px;
}

.linkTestBtn {
  margin-left: 15px;
}

.borderRow>.el-row {
  padding: 0px 0px;
}

.borderRow>.padBot10 {
  padding-bottom: 20px;
}

.removeBtn {
  margin-left: 20px;
  height: 25px;
  width: 25px;
  color: #f44336;
  font-size: 24px;
  cursor: pointer;
}

.maginTop10 {
  margin-top: 10px;
}

.tableBox {
  width: 1000px;
  margin: 0 auto;
  text-align: left;
  margin-top: 10px;
}

.textCenter {
  text-align: center;
}

.transferk {
  width: 450px;
  height: 380px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: #fff;
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  position: relative;
  margin: 10px;
}

.tipTxt {
  color: #626060;
  font-size: 14px;
  display: inline-block;
  margin-top: 10px;
}

//********* 流程css ****************//
.processNode {
  display: inline-block;
  height: 50px;
  width: 150px;
  border: 1px solid #1890ff;
  line-height: 50px;
  text-align: center;
  background-color: #b2daff;
  border-radius: 5px;
  margin-right: 100px;
  margin-bottom: 65px;
  white-space: nowrap;
  overflow: hidden;
  padding: 0px 10px;
  text-overflow: ellipsis;
  cursor: pointer;
  position: relative;
}

.processNode .el-icon-close {
  position: absolute;
  top: 3px;
  left: 130px;
}

.botAddBtn {
  margin-left: 10px;
}

.inlineBlock {
  display: inline-block;
  position: relative;
}

.inlineBlock::after {
  content: "";
  display: inline-block;
  height: 60px;
  position: absolute;
  background-size: cover;
}

.inlineBlock::before {
  content: "";
  display: inline-block;
  height: 60px;
  position: absolute;
  background-size: cover;
}

.topFrist::after {
  width: 200px;
  top: 53px;
  left: 0px;
  background-image: url(../../../../assets/images/step/bottom011.png);
}

.topFrist::before,
.topMiddle::before,
.botFrist::before,
.botMiddle::before,
.topOneLeft::before,
.lastFrist::before {
  width: 100px;
  top: -6px;
  left: 150px;
  background-image: url(../../../../assets/images/step/left.png);
}

.topFristEnd::after {
  width: 200px;
  top: 53px;
  left: -28px;
  background-image: url(../../../../assets/images/step/bottom01.png);
}

.topEnd::after {
  width: 200px;
  top: 51px;
  left: -50px;
  background-image: url(../../../../assets/images/step/end01.png);
}

.topMiddle::after {
  width: 250px;
  top: 50px;
  left: -50px;
  background-image: url(../../../../assets/images/step/bottom031.png);
}

.topFrist::after {
  width: 200px;
  top: 53px;
  left: 0px;
  background-image: url(../../../../assets/images/step/bottom011.png);
}

.lastFrist::after {
  width: 100px;
  top: -6px;
  left: 150px;
  background-image: url(/static/img/left.85ebdc1d.png);
}

.lastFristEnd {}

.lastEnd {}

.botFrist::after {
  width: 200px;
  top: -63px;
  left: -0;
  background-image: url(../../../../assets/images/step/top011.png);
}

.botFristEnd::after {
  width: 200px;
  top: -60px;
  left: -28px;
  background-image: url(../../../../assets/images/step/top01.png);
}

.botEnd::after {
  width: 200px;
  top: -60px;
  left: -50px;
  background-image: url(../../../../assets/images/step/botend01.png);
}

.botMiddle::after {
  width: 250px;
  top: -60px;
  left: -50px;
  background-image: url(../../../../assets/images/step/top031.png);
}
</style>

<style lang="scss" scoped>
.node {

  .left,
  .right {
    float: left;
    width: 49%;
    padding: 10px;
    box-shadow: 0 0 5px #ddd;
    margin-right: 10px;

    .node_table {
      width: 100%;
      max-height: 400px;
      overflow-y: auto;
      margin-top: 15px;
      th {
        background-color: #fff;
      }
    }
  }
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
</style>
